<template>
  <view class="personContainer">
    <view class="mainCard">
      <!-- 信息主要内容卡片区 -->
      <uni-card :title="userData.userName" :sub-title="userData.userId"
        :extra="userData.userIdentity === '1' ? '老师' : '学生'" spacing="15px" :isShadow="true">
      </uni-card>
    </view>
    <!-- 背景区 -->
    <view class="background">
    </view>
    <!-- 个人信息区 -->
    <view class="information">
      <view class="outCard">
        <uni-card :is-shadow="true">
          <uni-list :border="false">
            <uni-list-item title="学/工号" :rightText="userData.userId"></uni-list-item>
            <uni-list-item title="身份" :rightText="userData.userIdentity == '1' ? '老师': '学生'"></uni-list-item>
            <uni-list-item title="手机号" :rightText="userData.userMobile"></uni-list-item>
            <uni-list-item title="性别" :rightText="userData.userGender == '1' ? '男' : '女'"></uni-list-item>
          </uni-list>
        </uni-card>
      </view>
      <view class="btnZone">
        <wyb-button class="btn" width="620rpx" type="filled" color="#ff84b4" :radius="['40px']" @click="editPerson">修改资料
        </wyb-button>
        <view class="btn2">
          <wyb-button class="btn2" width="620rpx" type="filled" color="#bcbcbc" :radius="['40px']" @click="quitLogin">
            退出登录
          </wyb-button>
        </view>

      </view>

    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        userData: {},
      }
    },
    onShow() {
      this.getPersonData();
    },
    onTabItemTap() {
      // 发请求请求数据
      this.getPersonData();
    },
    methods: {
      // 请求个人信息数据
      getPersonData() {
        uni.showLoading({
          title: '加载中...'
        })
        this.$http.get('/api/user/getUserData').then((res) => {
          this.userData = {};
          if(res.data.code == 200){
            this.userData.userId = res.data.data.userId;
            this.userData.userName = res.data.data.userName;
            this.userData.userIdentity = res.data.data.userIdentity;
            this.userData.userIdentityNumber = res.data.data.userIdentityNumber;
            this.userData.userMobile = res.data.data.userMobile;
            this.userData.userGender = res.data.data.userGender;
            this.userData.userPassword = res.data.data.userPassword;
          }else {
            uni.showToast({
              title: '加载个人信息失败，请稍后重试',
              icon: 'none',
              duration: 2000
            });
          }
          uni.hideLoading();
        });
      },
      // 点击修改资料按钮
      editPerson() {
        uni.navigateTo({
          url: '/pages/function/person/EditPerson',
          });
      },
      // 点击退出登录按钮
      quitLogin() {
        uni.showModal({
          title: '提示',
          content: '是否退出登录',
          success: function(res) {
            if (res.confirm) {
              uni.removeStorageSync('token');
              uni.redirectTo({
                url: '/pages/login/Login'
              })
            } else if (res.cancel) {
        		    console.log('用户点击取消');
            }
          }
        });
      }
    }
  }
</script>

<style>
  .personContainer {
    position: relative;
    height: 100%;
    width: 100%;
  }

  /* 背景 */
  .personContainer .background {
   background-color: #ff84b4;
    height: 20%;
  }

  /* 信息卡片区 */
  .personContainer .mainCard .uni-card {
    position: absolute;
    border-radius: 40rpx;
    /* 定位 */
    top: 13%;
    width: 620rpx;
    height: 150rpx;
  }

  /* 信息区 */
  .personContainer .information {
    width: 99%;
    height: 80%;
    background-color: #ffffff;

  }

  .personContainer .information .uni-card {
    border-radius: 40rpx;
  }

  .personContainer .information .outCard {
    margin-top: 180rpx;
  }

  .personContainer .btnZone {
    padding: 20rpx 64rpx;
  }

  .personContainer .btnZone .btn2 {
    margin-top: 20rpx;
  }
</style>
